<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="submit">上传</button>
    <div>上传进度：{{ progress }}%</div>
  </div>
</template>  
  
<script>
import axios from "axios";

export default {
  data() {
    return {
      file: null, // 存储选择的文件对象
      progress: 0, // 存储上传进度百分比
    };
  },
  methods: {
    uploadFile(event) {
      this.file = event.target.files[0]; // 获取选择的文件对象
    },
    async submit() {
      let timer = null;
      let self = this;
      try {
        const formData = new FormData();
        formData.append("video", this.file); // 将文件添加到FormData对象中
        const response = await axios.post("/api/file/upload", formData, {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: function (progressEvent) {
            // console.log(progressEvent);
            /* if (progressEvent.lengthComputable) {
              let progressPercent = parseInt(
                (progressEvent.loaded / progressEvent.total) * 100
              );
              console.log("progressPercent", progressPercent);
              self.progress = progressPercent;
            } */
            const complete = (progressEvent.loaded / progressEvent.total) * 100;

            // 超过80 开始干涉
            if (complete >= 80) {
              if (timer) return;
              timer = window.setInterval(() => {
                self.progress += (100 - self.progress) * 0.2; // 每次增加剩下的20%

                // 超过99 不再变化（此时也接近上传完成了）
                if (self.progress > 99) {
                  timer && window.clearInterval(timer);
                }
              }, 1000);
            } else {
              // 在80之前都按照axios计算出的进度来显示
              self.progress = complete;
            }
          },
        }); // 发送文件请求
        if (response.status === 200) {
          // 假设服务器返回200表示上传成功
          this.progress = 100; // 设置上传进度为100%
          alert(200);
        } else {
          // 处理上传失败的情况，可以设置上传进度为0或其他操作
          this.progress = 0;
        }
      } catch (error) {
        console.error(error); // 打印错误信息，可以替换为其他操作。
      } finally {
        // 无论成功或失败，最后都清理进度条实例，避免内存泄漏。
        console.info("finally");
      }
    }, // 上传方法结束，提交表单或执行其他操作。 																																					 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束。 结束.  结束。 结束。 结束。 结束。 结束。 结束。 结束.  结束。  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  结束.  end;
  },
};
</script>